<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-form ref="form" :model="form" label-width="100px" class="flex">
            <el-form-item label="时间">
              <el-switch
                v-model="status"
                style="margin-right: 10px"
                active-color="#13ce66"
                inactive-color="#409eff"
                active-text="月"
                inactive-text="日"
                @change="changestas"
              />
              <el-date-picker
                v-if="status == false"
                v-model="form.queryDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                style="width: 300px"
              />
              <el-date-picker
                v-if="status == true"
                v-model="form.queryMonth"
                value-format="yyyy-MM"
                type="month"
                placeholder="选择月"
                style="width: 300px"
              />
            </el-form-item>
            <el-form-item label="类型">
              <el-select
                v-model="form.queryType"
                placeholder="请选择类型"
                style="width: 286px"
              >
                <el-option label="费用大类" :value="0" />
                <el-option label="费用名称" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button class="inquiry" @click="inquiry">查询</el-button>
              <elbutton :obj="form" @dj="clear" />
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div class="page">
          当前页共<span>{{ tableData.length }}</span
          >项
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="24">
        <elltable :loading="loading" :data="tableData" :th="th" :n="3" />
      </el-col>
    </el-row>
    <div class="block" style="display: flex; justify-content: flex-end">
      <pagination
        :current-page="form.pageDate.pageNum"
        :page-size="form.pageDate.pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { billListApi } from "@/api/accountingbill";
export default {
  data() {
    return {
      status: false,
      loading: false,
      // 查询表单
      form: {
        queryDate: null,
        queryMonth: null,
        queryType: "",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      tableData: [],
      total: 0,
      th: [],
    };
  },
  watch: {
    "form.queryDate"(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.resetPageDate();
      }
    },
    "form.queryMonth"(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.resetPageDate();
      }
    },
    "form.queryType"(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.resetPageDate();
      }
    },
  },
  methods: {
    resetPageDate() {
      this.$set(this.form.pageDate, "pageNum", 1);
    },
    // 状态改变
    changestas(val) {
      this.clear();
    },
    async inquiry() {
      if (this.form.queryDate === null && this.form.queryMonth === null) {
        this.$message("请选择日期");
        return;
      }
      if (this.form.queryType === "") {
        this.$message("请选择类型");
        return;
      }
      this.loading = true;
      const res = await billListApi(this.form);
      // console.log('核算清单列表', res)
      this.loading = false;
      if (res.code === 200) {
        this.tableData = res.data.list.data;
        this.total = res.data.list.total;
        this.th = res.data.fields;
      } else {
        this.tableData = [];
        this.total = 0;
      }
    },
    handleSizeChange(val) {
      this.form.pageDate.pageSize = val;
      this.form.pageDate.pageNum = 1;
      this.inquiry();
    },
    handleCurrentChange(val) {
      this.form.pageDate.pageNum = val;
      this.inquiry();
    },
    // 重置
    clear(query) {
      // this.form = query
      this.form.queryDate = null;
      this.form.queryMonth = null;
      this.form.queryType = "";
      this.form.pageDate.pageSize = 10;
      this.form.pageDate.pageNum = 1;
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  padding: 0px 20px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.flex-bettom {
  display: flex;
  justify-content: space-between;
}

.header {
  margin-top: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.inquiry {
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #fff;
}
.page > span {
  color: #2087d0;
}
</style>
